<template>
  <div>
    <!-- 收货地址 -->
    <div>
      <span>
        <el-descriptions title="收货人信息">
        <el-descriptions-item label="收货人">{{siteResp.siteName}}</el-descriptions-item>
        <el-descriptions-item label="公司">{{siteResp.siteCompany}}</el-descriptions-item>
        <el-descriptions-item label="电话">{{siteResp.siteTelephone}}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">公司</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">{{siteResp.siteAddress}} </el-descriptions-item>
    </el-descriptions>

      </span>

      <el-button type="text" @click="lookSite">更多》</el-button>
      <el-button @click="siteAdd">新增收货地址</el-button>
      <span v-if="buttonState==1">
        <template>
          <el-table :data="siteList" style="width: 100%">

            <el-table-column prop="siteName" label="收货人姓名" width="180"></el-table-column>
            <el-table-column prop="siteCompany" label="公司" width="180"></el-table-column>
            <el-table-column prop="siteAddress" label="详细地址" width="180"></el-table-column>
            <el-table-column prop="siteTelephone" label="电话" width="180"></el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="mini" type="danger" @click="handleSelete(scope.row)">选择</el-button>
                <el-button size="mini" type="danger" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDefaul(scope.row)">默认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </span>


      <!-- 添加或修改收货地址对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="siteRespTwo" :rules="rules" label-width="80px">
          <el-form-item label="收货人姓名" prop="siteName">
            <el-input v-model="siteRespTwo.siteName" placeholder="请输入收货人姓名" />
          </el-form-item>
          <el-form-item label="公司" prop="siteCompany">
            <el-input v-model="siteRespTwo.siteCompany" placeholder="请输入公司" />
          </el-form-item>
          <el-form-item label="地址">
            <div class="block">
                <span class="demonstration">三级下拉</span>
              <el-cascader style="width: 100%"
                           v-model="provincesValue"
                           :options="provincesList"
                           :props="{label:'provincesName',value:'provincesId'}"
                           @change="provincesValueChange"
              ></el-cascader>
              </div>
          </el-form-item>
          <el-form-item>
            <el-input v-model="siteRespTwo.provincesId"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="siteAddress">
            <el-input v-model="siteRespTwo.siteAddress" placeholder="请输入详细地址" />
          </el-form-item>
          <el-form-item label="电话" prop="siteTelephone">
            <el-input v-model="siteRespTwo.siteTelephone" placeholder="请输入电话" />
          </el-form-item>
<!--          <el-form-item label="是否默认" prop="siteState">-->
<!--            <el-radio-group v-model="form.siteTelephone">-->
<!--              <el-radio-->
<!--                v-for="dict in dict.type.sys_normal_disable"-->
<!--                :key="dict.value"-->
<!--                :label="dict.value"-->
<!--              >{{dict.label}}</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
          <el-form-item label="是否默认" prop="siteState">
            <template>
              <el-radio v-model="siteRespTwo.siteState" label="1">默认</el-radio>
              <el-radio v-model="siteRespTwo.siteState" label="2">不默认</el-radio>
            </template>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <!-- 支付方式  -->
    <div>
      <p>支付方式</p>
      <el-button @click="Alipay">支付宝</el-button>
      <el-button @click="WeChat">微信</el-button>
      <el-button @click="bankCard">银行卡</el-button>
      <br><br><br><br>
    </div>
    <!-- 商品信息  -->
    <div>
      <el-container>
        <el-aside width="300px">
          <span>
            <el-image  style="width: 250px; height: 250px" :src="ProductRultAttrCenter.image"></el-image>
          </span>
        </el-aside>
        <el-main>
          <span>商品名称{{ProductRultAttrCenter.productName}}</span><br>
          <span style="color: red">商品价格{{ProductRultAttrCenter.sellingPrice}}</span>
          <br>
          <template>
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-main>
      </el-container>
      <p>总商品金额：{{ordersCreate.ordersPriceSum}}</p>
      <p>运费：{{freight}}</p>
      <p style="color: red"  >应付总额：{{ordersCreate.ordersPayPrice}}</p>
      <el-button type="danger" @click="submitOrders">提交订单</el-button>
    </div>
  </div>
</template>

<script>
import { ordersSelectSkuIdEcho, getToken, subMitOrdersCreate } from "../../../api/orders/orders";
import { listSite, selectUserSite, addSite,  deleteSiteId, selectSiteId, updateSite, defultSiteById} from "../../../api/orders/site";
import { findByProvincesId } from "../../../api/orders/provinces";

export default {
  name: "Details",
  data() {
    return {
      provincesValue: [],
      provincesList: [],
      productSkuId: "",
      ProductRultAttrCenter: {
        productId: null,
        sku: null,
        image: null,
        sellingPrice: null,
        productName: null
      },
      num: 1,
      priceMax: 0,
      freight: 0,
      ordersCreate: {
        //订单总价
        ordersPriceSum: null,
        //实付金额
        ordersPayPrice: null,
        //支付方式
        ordersPayWay: null,
        //收货地址id
        siteId: null,
        //商品id
        productId: null,
        //商品数量
        ordersDetailsProductNum: 1,
        //商品价格
        ordersDetailsProductPrice: null,
        //token
        ordersToken: null
      },
      siteList: [],
      siteResp: {
        siteId: null,
        siteName: null,
        siteCompany: null,
        siteAddress: null,
        siteTelephone: null,
        siteState: null
      },
      provincesValueName: '',
      siteRespTwo: {
        siteId: null,
        aaaa: '',
        provincesId: '',
        siteName: null,
        siteCompany: null,
        siteAddress: null,
        siteTelephone: null,
        siteState: null
      },
      buttonState: 0,
      open: false,

    };
  },
  created() {
    // let id =this.$route.query.id
    this.getProvincesList()

    this.getList()
    this.getUserDefaultSite()
    this.getOrdersToken()
    this.getProductId()
  },
  methods: {
    getProductId() {
      this.productSkuId = this.$route.query.id
      this.selectSkuId()
    },
    searchProvincesNull() {
      this.provincesValueName = '';

    },
    getprovincesName(list) {
      list.forEach((provinces) => {
        if (provinces.children!=null){
          this.getprovincesName(provinces.children)
        }
        this.provincesValue.forEach((value) => {
          if (value == provinces.provincesId) {
            this.provincesValueName = provinces.provincesName + this.provincesValueName;
          }
        })
      })
    },
    provincesValueChange() {
      this.searchProvincesNull()
      this.getprovincesName(this.provincesList)
      this.siteRespTwo.provincesId = this.provincesValue.toString()
    },
    handleSelete(row) {
      selectSiteId(this.ordersCreate.siteId = row.siteId).then(response => {
        this.siteResp = response
        this.$message.success("选择成功")
      })
    },
    handleUpdate(row) {
      selectSiteId(this.ordersCreate.siteId = row.siteId).then(response => {
        this.siteRespTwo = response
        this.open = true
      })
    },
    handleDefaul(row) {
      defultSiteById(this.ordersCreate.siteId = row.siteId).then(response => {
        this.$message.success("设置默认成功")
      })
    },
    //获取地址id
    handleDelete(row) {
      deleteSiteId(this.ordersCreate.siteId = row.siteId).then(response => {
        this.siteResp = response
        this.$message.success("删除成功")
      })
    },
    getProvincesList() {
      findByProvincesId().then(response => {
        this.provincesList  = this.handleTree(response.data, "provincesId", "parentId");
      })
    },
    //提交订单
    submitOrders() {
      if (this.ordersCreate.siteId == null){
        this.ordersCreate.siteId = this.siteResp.siteId
      }
      this.ordersCreate.ordersDetailsProductPrice  = this.ProductRultAttrCenter.sellingPrice
      subMitOrdersCreate(this.ordersCreate).then(response => {
        debugger
        this.$message({
          message: response.msg,
          type: 'success'
        })
      })
    },
    //获得token令牌
    getOrdersToken() {
      getToken().then(response => {
        this.ordersCreate.ordersToken = response.data
      })
    },
    //获取复选框值
    getSiteId(row) {
      console.log(row.siteId)
    },
    siteAdd() {
      this.open = true
    },
    submitForm(){
      if (this.siteRespTwo.siteId == null) {
        this.siteRespTwo.siteAddress = this.provincesValueName + this.siteRespTwo.siteAddress
        addSite(this.siteRespTwo).then(response => {
          this.$modal.msgSuccess("新增成功");
        })
        this.open = false
        this.getList()
      } else if (this.siteRespTwo.siteId != null){
        this.siteRespTwo.siteAddress = this.provincesValueName + this.siteRespTwo.siteAddress
        updateSite(this.siteRespTwo).then(response => {
          this.$modal.msgSuccess("修改成功");
        })
        this.open = false
        this.getList()
      }
    },
    getUserDefaultSite(){
      selectUserSite().then(response => {
        this.siteResp = response.data
      })
    },
    getList() {
      listSite().then(response => {
        this.siteList = response.rows;
      });
    },
    //回显
    selectSkuId(){
      ordersSelectSkuIdEcho(this.productSkuId).then(response => {
        this.ProductRultAttrCenter = response.data
        this.ordersCreate.ordersPriceSum = this.ProductRultAttrCenter.sellingPrice
        this.ordersCreate.ordersPayPrice =  this.ProductRultAttrCenter.sellingPrice + this.freight
        this.ordersCreate.productId = this.ProductRultAttrCenter.productId
      })
    },
    //计算价格
    handleChange() {
      this.ordersCreate.ordersPriceSum = this.ProductRultAttrCenter.sellingPrice * this.num
      this.ordersCreate.ordersPayPrice =  this.ordersCreate.ordersPriceSum + this.freight
      this.ordersCreate.ordersDetailsProductNum = this.num
    },
    Alipay(){this.ordersCreate.ordersPayWay = 3},
    WeChat(){this.ordersCreate.ordersPayWay = 4},
    bankCard(){this.ordersCreate.ordersPayWay = 5},
    lookSite(){
      this.buttonState = 1

    }

  }
};
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

